import React, { Component } from 'react'

import style from './index.module.css'

export default class Footer extends Component {
  state = {
    checked: false
  }

  onClear = () => {
    const { data } = this.props;
    const newData = data.filter(it => !it.checked);
    this.props.handleChange(newData);
    this.setState({ checked: false });
  }

  handleCheck = (e) => {
    const checked = e.target.checked;
    const { data } = this.props;
    let newData = data.map(it => ({ ...it, checked }));
    this.props.handleChange(newData);
  }

  render() {
    const { data } = this.props;
    const total = data.length;
    const completedCount = data.filter(it => it.checked).length;

    return (
      <div className={style.footer}>
        <input type="checkbox" checked={completedCount === total && total !== 0} onChange={this.handleCheck} />
        <span className={style.selected}>已完成{completedCount}/全部{data.length}</span>
        <button className={style.button} onClick={this.onClear}>清除已完成任务</button>
      </div>
    )
  }
}
